<template>
  <div class="search">
    <div class="search_input">
      <input type="text" placeholder="搜索..." v-model="s" />
      <img
        src="../assets/img/search.jpg"
        v-on:keyup.13="get_search"
        @click="get_search"
      />
    </div>
    <div class="history">
      <span>历史搜索</span>
      <img src="../assets/img/del.png" @click="empty" alt="清空历史记录" />
      <ul>
        <li
          v-for="(item, index) in historyList"
          :key="index"
          @click="goSearchDetail(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="search_content" v-if="data">
      <div class="content">
        <div class="header">
          <span>8 / 1 - 8</span>
          <span>最相关</span>
        </div>
        <div
          class="body"
          v-for="{ subtitle,title, details, price, lid } in data"
          :key="lid"
        >
          <img :src="details" />
          <div>
            <span class="first">{{ title }}</span>
            <span class="second">{{ subtitle }}</span>
            <span class="third">$ {{ price }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      s: "", //搜索的内容
      historyList: [], //历史搜索记录 存本地
      data:{},
    };
  },
  mounted() {
    console.log("==>", this.$route.query.data);
    this.s = this.$route.query.data;
  },
 methods: {
           get_search(){
        	if(this.s == ''){
        		return false;
        	}else{
                // 没有搜索记录，把搜索值push进数组首位，存入本地
               this.historyList =  ["historyList",'联想']
;
                if (!this.historyList.includes(this.s)) {
                  this.historyList.unshift(this.s);
                  localStorage.setItem("historyList", JSON.stringify(this.historyList));
                }else{
                    //有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
                    let i =this.historyList.indexOf(this.s);
                    this.historyList.splice(i,1)
                    this.historyList.unshift(this.s);
                    localStorage.setItem("historyList", JSON.stringify(this.historyList));
                }
        //跳转到搜索结果页
        // this.$router.push({
        // 	path: "/searchIndex",
        // 	query: {
        // 		search_val: this.s,
        // 	},
        // });
        const url = "search?value=" + this.s;
          this.axios.get(url).then((res) => {
            console.log(res);
            this.data = res.data.result;
            console.log(this.data)
            });
      }
    },
    //点击历史搜索，跳转搜索结果页
    //   goSearchDetail(title){
    //   	this.$router.push({
    //   		path: "/list",
    //   		query: {
    //   			search_val: title,
    //   		},
    //   	});
    //   },
    //清空历史搜索记录
    empty() {
      localStorage.removeItem("historyList");
      this.historyList = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  // height: 500px;
  // background-color: skyblue;
  margin-top: 51px;
  .search_input {
    box-sizing: border-box;
    height: 100px;
    padding-top: 30px;
    background-color: #eeeeee;

    // display: flex;

    input {
      position: relative;
      display: block;
      margin: auto;
      width: 550px;
      border: 2px solid #999;
      padding: 18px;

      &::-webkit-input-placeholder {
        color: #c8c8c8;
        font-size: 16px;
      }
      &:focus {
        outline: 0;
        border-color: #76b900;
      }
    }

    img {
      position: absolute;
      left: 1200px;
      top: 98px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .history {
    background-color: #eeeeee;
    height: 50px;

    span {
      margin-left: 660px;
      font-size: 14px;
      vertical-align: 10px;
      color: #c8c8c8;
    }
    img {
      margin-left: 490px;
      width: 25px;
      vertical-align: 5px;
      background-color: #eeeeee;
    }
  }
  ul {
    margin-left: 660px;
    display: flex;
    li {
      list-style: none;
      font-size: 12px;
      color: #c8c8c8;
      margin-left: 10px;
      cursor: pointer;
    }
  }

  .search_content {
    .content {
      width: 1300px;
      // background-color: #ccc;
      margin: 0 auto;
      .header {
        margin: 20px 0;
        border-bottom: 1px solid #ccc;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-weight: bold;
        padding-bottom: 10px;
      }
      .body {
        display: flex;
        flex-direction: row;
        height: 110px;
        align-items: center;
        img {
          width: 250px;
          height: 150px;
          // vertical-align: center;
          margin-right: 30px;
        }
        div {
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: space-evenly;
          .first {
            font-size: 26px;
            color: #76b900;
            font-weight: bold;
          }
          .second {
            font-size: 18px;
            color: #666;
          }
          .third {
            font-size: 24px;
            color: #9fa19f;
          }
        }
      }
    }
  }
}
</style>